<template>
  <div>
    <article-templates :data="articleData">
      <template #article>
        <amap-components></amap-components>
        <div>
          <title-card title="引入高德地图"></title-card>
          <pre-code :code="codeNpm" language="JavaScript" />
          <title-card title="初始化"></title-card>
          <pre-code :code="initAmap" language="JavaScript" />
          <title-card title="标记当前位置"></title-card>
          <pre-code :code="getMap" language="JavaScript" />
          <title-card title="获取当前位置"></title-card>
          <pre-code :code="geolocation" language="JavaScript" />
          <title-card title="地理编码"></title-card>
          <pre-code :code="geoAmapCoder" language="JavaScript" />
        </div>
      </template>
    </article-templates>
  </div>
</template>

<script setup name="Amap">
import ArticleTemplates from '@/components/ArticleTemplates/index.vue';
import TitleCard from '@/components/TitleCard/index.vue';
import AmapComponents from "./AmapComponents/index.vue"
import { postArticleDetail } from '@/api/home.js';
import { onMounted, ref, toRefs, reactive } from 'vue';

const data = reactive({
  articleData: {},
});
const { articleData } = toRefs(data);

const codeNpm = ref(`//安装
npm i @amap/amap-jsapi-loader --save
// 使用
import * as AMapLoader from "@amap/amap-jsapi-loader";`)
const initAmap = ref(`const initAmap = () => {
  AMapLoader.load({
    key: "262a04b3f613319e548aae39452048ca", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "1.4.8", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [
      "AMap.PolygonEditor", // 插件
      'AMap.HawkEye',
      'AMap.ToolBar',
      'AMap.Geolocation',
      'AMap.Geocoder'
    ],
  })
    .then((amap) => {
      AMap = amap;
      //地图加载
      map = new AMap.Map("containers", {
        zoom: 12, //设置地图显示的缩放级别
        center: center.value, //设置地图中心点坐标
      });
      console.log(AMap,map);
      map.on("click", (ev) => {
        // 触发事件的对象
        center.value = [ev.lnglat.lng, ev.lnglat.lat];
        getMap();
      });
      if (longitude.value&&latitude.value) {
        getMap();
      } else {
        if (address.value) {
          geoAmapCoder()
        } else {
          geolocation(); //获取当前位置
        }
      }
      // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
      map.addControl(new AMap.ToolBar());

      // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
      map.addControl(new AMap.HawkEye({isOpen:true}));

      // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
      map.addControl(new AMap.Geolocation({position: "LB"}));
    })
    .catch((e) => {
      console.log(e);
    });
}`)
const getMap = ref(`const getMap = () => {
  marker.value = [...center.value];
  let marker1 = new AMap.Marker({
    position: new AMap.LngLat(center.value[0], center.value[1]),
  });
  map.clearMap(); //清除所有覆盖物
  map.add(marker1);
  map.setZoomAndCenter(15, center.value);
}`)
const geolocation = ref(`const geolocation = () => {
  AMap.plugin("AMap.Geolocation",() => {
    var geolocation = new AMap.Geolocation({
      // 是否使用高精度定位，默认：true
      enableHighAccuracy: true,
      // 设置定位超时时间，默认：无穷大
      timeout: 10000,
      // 定位按钮的停靠位置的偏移量
      offset: [10, 20],
      //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
      zoomToAccuracy: false,
      //  定位按钮的排放位置,  RB表示右下
      position: "LB",
      showButton: true, 
    });
    geolocation.getCurrentPosition((status, result) => {
      console.log(result);
      if (status == "complete") {
        onComplete(result);
      } else {
        onError(result);
      }
    });
    
    // _that.map.addControl(geolocation);

    function onComplete(data) {
      // console.log(data);
      // data是具体的定位信息
      let {lng,lat} = {...data.position};
      center.value = [lng,lat];
      getMap();
    }

    function onError(data) {
      // 定位出错
      ElMessage({
        type: "info",
        message: "无法获取当前位置",
      });
    }
  });
}`)
const geoAmapCoder = ref(`const geoAmapCoder = () => {
  geocoder = new AMap.Geocoder();
  geocoder.getLocation(address.value,(status, result) => {
    if (status === 'complete'&&result.geocodes.length) {
      console.log('%c [ result ]-190', 'font-size:13px; background:pink; color:#bf2c9f;', result)
      let {lat,lng} = {...result.geocodes[0].location};
      center.value = [lng,lat];
      getMap();
    }else{
      ElMessage({
        type: "info",
        message: "根据地址查询位置失败",
      });
    }
  })
}`)

const getTitle = () => {
  postArticleDetail({
    route: 'Amap',
  }).then((res) => {
    articleData.value = res.data;
  });
};
onMounted(() => {
  getTitle();
});
</script>
